fetch('http://127.0.0.1:5000/movies/top-rated')
            .then(response => response.json())
            .then(data => {
                // 只取前10条数据，并使用 movie_name 字段
                const top10 = data.slice(0, 10);

                const indicator = top10.map(item => ({
                    name: item.movie_name, // 使用 movie_name 字段
                    max: Math.max(...top10.map(i => i.rater_count)) * 1.1 // 设置最大值略大于最大评价人数
                }));

                const values = top10.map(item => item.rater_count);

                // 初始化ECharts
                const myChart = echarts.init(document.querySelector('.three .leida'));
                const option = {
                    tooltip: {},
                    legend: {
                        data: ['评价人数'],
                        bottom:'0',
                        textStyle: {
                            fontSize: 9,
                            color: '#fff'
                        },
                        right:'0'

                    },
                    radar: {
                        indicator: indicator,
                        shape: 'polygon',
                        splitNumber: 5,
                        radius: '50%',
                        axisName: {
                            color: '#ffffff',
                            fontSize: 10,
                            fontWeight: '300',
                            borderRadius: 3,
                            padding: [2, 6]
                        },
                        splitArea: {
                            areaStyle: {
                                color: [
                                    'rgba(63,81,181,0.1)',
                                    'rgba(63,81,181,0.2)',
                                    'rgba(63,81,181,0.3)',
                                    'rgba(63,81,181,0.4)',
                                    'rgba(63,81,181,0.5)'
                                ]
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#3949ab',
                                width: 2
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3949ab',
                                width: 2
                            }
                        }
                    },
                    series: [{
                        name: '电影评价人数',
                        type: 'radar',
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            color: 'rgba(255,87,34,1)',
                            width: 4
                        },
                        itemStyle: {
                            color: 'rgba(255,87,34,1)',
                            borderColor: '#ccc',
                            borderWidth: 2
                        },
                        areaStyle: {
                            color: 'rgba(255,87,34,0.4)'
                        },
                        data: [
                            {
                                value: values,
                                name: '评价人数'
                            }
                        ]
                    }]
                };
                myChart.setOption(option);
            })
            .catch(error => {
                document.getElementById('radar').innerText = '数据加载失败: ' + error;
            });